<template>
  <div class="bgImg">
    <div class="login-box">
      <img
        class="logintop-Ing"
        src="https://likede2-admin.itheima.net/img/logo.595745bd.png"
        alt=""
      />
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
        <el-form-item prop="loginName">
          <el-input v-model="ruleForm.loginName">
            <template #prefix>
              <i style="font-size: 20px" class="iconfont icon-shouji"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="ruleForm.password" show-password>
            <template #prefix>
              <i style="font-size: 20px" class="iconfont icon-suo"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="ruleForm.code" placeholder="请输入验证码">
            <template #prefix>
              <i
                style="font-size: 20px; position: absolute; top: 8px"
                class="iconfont icon-dunpai"
              ></i>
            </template>
            <template #append>
              <img
                class="yanzhengma"
                style="width: 130px; height: 52px; display: block"
                :src="src"
                alt=""
                @click="fn"
              />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { yanzhengma } from '@/api/index'
export default {
  name: 'login-page',
  components: {},
  props: {},
  data() {
    return {
      ruleForm: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        loginType: '0',
        clientToken: ''
      },
      src: '',

      rules: {
        loginName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [
          {
            validator: (rule, value, callback) => {
              value ? callback() : callback(new Error('请输入验证码'))
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},

  watch: {},
  async created() {
    this.fn()
  },

  methods: {
    async submitForm() {
      this.$refs.ruleForm.validate()
      await this.$store.dispatch('user/login', this.ruleForm)
      const userInfo = this.$store.state.user.userInfo
      console.log(userInfo)
      if (userInfo.success) {
        this.$message.success(userInfo.msg)
        this.$router.push('/')
      } else {
        this.$message.error(userInfo.msg)
      }
    },
    async fn() {
      this.ruleForm.clientToken = +new Date()
      const data = await yanzhengma(this.ruleForm.clientToken)
      console.log(data)
      const src = window.URL.createObjectURL(data)
      // console.log(src)
      this.src = src
    }
  }
}
</script>

<style scoped lang="scss">
.bgImg {
  height: 100vh;
  background-image: url('https://likede2-admin.itheima.net/img/background.be4fae7d.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  .login-box {
    width: 442px;
    height: 311px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
    padding: 76px 35px 0;

    .logintop-Ing {
      position: absolute;
      width: 96px;
      height: 96px;
      top: -46px;
      left: 50%;
      margin-left: -48px;
    }
  }
}
::v-deep .el-input__inner {
  height: 52px;
}
::v-deep .el-button {
  width: 100%;
  height: 52px;
  background: linear-gradient(262deg, #2e50e1, #6878f0);
  opacity: 0.91;
  border-radius: 8px;
  color: #fff;
  text-shadow: 0 7px 22px #cfcfcf;
  border: none;
}
::v-deep .svg-container {
  padding: 6px 5px 6px 15px;
}
::v-deep .el-input__prefix {
  top: 5px;
  left: 7px;
}
::v-deep .el-input__inner {
  padding-left: 42px;
}
::v-deep .el-input-group__append,
.el-input-group__prepend {
  border: none;
  padding: 0;
}
</style>
